<template>
  <div>
    <ul>
      <!--编程式路由,点击跳转-->
      <li @click="handle">这是第1个li</li>
      <li @click="handle1">这是第2个li</li>
      <li @click="handle2">这是第3个li</li>
    </ul>
    <!--路由出口-->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  //watch可以监听data的数据,还可以监听路由的变化
  watch: {
    '$route.path' (newpath) {
      if (newpath === '/two') {
        alert('你当前在第二个页面')
      }
    }

  },
  created () {
  },
  computed: {
  },
  methods: {
    //routes路由配置规则
    //this.route路由参数接收
    //this.$router跳转
    //1.因为this.$route.path的返回值是一个promise,执行过后返回reslove和reject
    handle () {
      if (this.$route.path === '/') return alert('已在当前页面无需点击')
      this.$router.push('/?id=1&name=盖伦')
    },
    handle1 () {
      this.$router.push({
        path: '/two',
        query: {
          id: 2,
          name: '螳螂'
        }
      })
    },
    handle2 () {
      this.$router.push({
        name: 'three',
        params: {
          id: 3,
          name: '厄斐琉斯'
        },
        query: {
          jinneg: '清辉月凝',
          level: 18
        },
      }).catch(err => { })
    }
  }
}
</script>
<style lang='less'  scoped>
ul {
  width: 800px;
  display: flex;
  justify-content: space-around;
  li {
    color: purple;
    margin: 20px;
    cursor: pointer;
  }
}
</style>
